<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button id="headerBacker" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>首页
			</button>
			<h1 class="mui-title">家政服务</h1>
		</header>
		<div class="mui-content">
			<img id="img1" src="./images/yuantiao.jpg" class="mui-hidden" />
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<a href="#">
							<img src="./images/shuijiao.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="./images/yuantiao.jpg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="mui-content-padded">
				<div>
					<p><span class="price-first">¥ 280.00</span> / <span class="price-two">¥ 380.00</span></p>
					<p style="color: #333; font-size: 18px;">家庭深度保洁 面积0-60平米</p>
					<p style="color: #555; font-size: 10px;">
						本商品为虚拟物品，无实物卡。预约后安排上门服务
					</p>
				</div>
				<div class="title">
					产品详情
				</div>
				<div style="margin: 10px 0 15px 0;">
					<p>
						这是transparent bar（透明导航栏）演示页面， 默认情况下标题栏透明，
						当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。
					</p>
				</div>
				<div class="title">
					用户好评
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="./images/avatar3.jpg">
							<div class="mui-media-body">
								幸福
								<p>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="./images/avatar3.jpg">
							<div class="mui-media-body">
								木屋
								<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="./images/avatar3.jpg">
							<div class="mui-media-body">
								CBD
								<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
							</div>
						</a>
					</li>

				</ul>
			</div>
			<div class="mui-content-padded footer">
				<p>
					--- 已经到底喽 ---
				</p>
			</div>
		</div>
		<div class="message bottom">
			<div class="action">
				<button id="order" type="button" class="mui-btn mui-btn-blue" style="width: 200px;">立即预约</button>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true
			});
			
			mui('body').on('tap', '#order', function () {
				window.location = 'order_create.html';
			})
		</script>
	</body>
</html>
